<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu default-active="active" class="el-menu-vertical-demo">
        <router-link to="/Index">
          <el-menu-item index="1">
            <el-icon>
              <HomeFilled />
            </el-icon>
            <span>首页</span>
          </el-menu-item>
        </router-link>
        <router-link to="/Category">
          <el-menu-item index="2">
            <el-icon><icon-menu /></el-icon>
            <span>分类管理</span>
          </el-menu-item>
        </router-link>
        <router-link to="/Goods">
          <el-menu-item index="3">
            <el-icon>
              <GoodsFilled />
            </el-icon>
            <span>商品管理</span>
          </el-menu-item>
        </router-link>
        <router-link to="/Setting">
          <el-menu-item index="4">
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>个人中心</span>
          </el-menu-item>
        </router-link>
      </el-menu>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import {
  HomeFilled,
  Menu as IconMenu,
  GoodsFilled,
  UserFilled,
} from "@element-plus/icons-vue";
</script>
<style lang="scss" scoped>
.el-menu {
  border: 0 !important;
}

.el-menu-item:hover {
  color: #fff;
  background: linear-gradient(90deg, #1493fa, #01c6fa);
}
</style>